<script setup lang="ts">
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
import { AddChild, EditChild } from "@/services/dictionary.ts";
import JinDrawer from "@/components/framework/jin-drawer/jin-drawer.vue";
import { defineProps, defineEmits } from "vue";
import { useRoute } from "vue-router";
import { Message } from "@arco-design/web-vue";
const emits = defineEmits<{
  (e: "getList"): void;
}>();

const props = defineProps({
  userId: {
    type: String,
    required: true,
  },
});

const drawer = ref<{
  init: () => {};
  close: () => {};
}>();

const option = reactive({
  title: "",
  visible: false,
});
const form = reactive({
  dictId: 0,
  itemText: "",
  itemValue: "",
  sortOrder: "",
  status: 0,
  itemColor: "",
  id: "",
  description: "",
});
// 确定
const formRef = ref(null);

const promise = (url, msg: string) => {
  url
    .then((res) => {
      if (res.code === 200) {
        Message.success(msg);
        drawer.value?.close();
        emits("getList");
      }
    })
    .finally(() => {
      loading.value = false;
    });
};
const loading = ref(false);
const handleOk = () => {
  loading.value = true;
  if (option.title === "新增字典") {
    promise(AddChild(form), "添加成功");
  } else {
    promise(EditChild(form), "编辑成功");
  }
};

const handleCancel = () => {
  drawer.value?.close();
};
// 添加
const show = () => {
  form.dictId = userId;
  form.itemText = "";
  form.itemValue = "";
  form.description = "";
  form.sortOrder = "";
  form.status = 0;
  form.itemColor = "";
  form.id = null;
  option.title = "新增字典";
  drawer.value?.init();
  formRef.value?.clearValidate();
};

const route = useRoute();
const userId = route.query.id;

// 修改
const edit = (row) => {
  form.itemText = row.itemText;
  form.itemValue = row.itemValue;
  form.sortOrder = row.sortOrder;
  form.status = row.status;
  form.itemColor = row.itemColor;
  form.description = row.description;
  form.id = row.id;
  form.dictId = userId;

  option.title = "编辑字典";
  drawer.value?.init();
  formRef.value?.clearValidate();
};

defineExpose({
  show,
  edit,
});

const handleSubmit = async (fn: (bool: boolean) => void) => {
  const error = await formRef.value?.validate();


  if (!error) {

    fn(true);
    return true;
  }

  fn(false);
  return false;
};

onMounted(() => {});
</script>

<template>
  <jin-drawer
    :title="option.title"
    @ok="handleOk"
    :width="600"
    @cancel="handleCancel"
    @beforeOk="handleSubmit"
    ref="drawer"
    :ok-loading="loading"
  >
    <a-form
      ref="formRef"
      :model="form"
      @submit="handleSubmit"
    >
      <a-form-item
        field="itemText"
        label="名称"
        :rules="[{required:true,message:'请输入名称'}]"
        :validate-trigger="['change','input']"
      >
        <a-input
          allow-clear
          placeholder='请输入名称'
          v-model.trim="form.itemText"
        ></a-input>
      </a-form-item>

      <a-form-item
        field="itemValue"
        label="数据值"
        :rules="[{required:true,message:'请输入数据值'}]"
        :validate-trigger="['change','input']"
      >
        <a-input
          allow-clear
          placeholder='请输入数据值'
          v-model='form.itemValue'
        ></a-input>
      </a-form-item>

      <a-form-item
        field="sortOrder"
        label="排序"
        :rules="[{required:true,message:'请输入排序'}]"
        :validate-trigger="['change']"
      >
        <a-input-number
          allow-clear
          placeholder="请输入排序"
          mode="button"
          v-model="form.sortOrder"
          min="0"
        />
      </a-form-item>

      <a-form-item
        field="status"
        label="状态"
        :rules="[{required:true,message:'请输入状态'}]"
        :validate-trigger="['change','input']"
      >
        <a-radio-group
          type="button"
          v-model="form.status"
        >
          <a-radio :value="1">禁用</a-radio>
          <a-radio :value="0">启用</a-radio>
        </a-radio-group>
      </a-form-item>

      <a-form-item
        field="itemColor"
        label="箭头颜色"
      >
        <a-input
          allow-clear
          placeholder='请输入箭头颜色'
          v-model='form.itemColor'
        ></a-input>
      </a-form-item>

      <a-form-item
        field="description"
        label="描述"
      >
        <a-textarea
          placeholder="请输入描述"
          allow-clear
          v-model="form.description"
        />
      </a-form-item>
    </a-form>
  </jin-drawer>
</template>

<style scoped lang="scss">
</style>
